<template>
  <el-watermark style="height: 100%; padding: 0; margin: 0" zIndex="99" id="watermark" :font="font" :content="[userName,userId]">
    <el-container style="height: 100%; padding: 0; margin: 0">
      <Aside />
      <TopBar v-if="showTabBar" />
      <el-container>
        <el-main>
          <slot name="main"> </slot>
        </el-main>
      </el-container>
    </el-container>
  </el-watermark>
</template>

<script>
import { reactive } from "vue";
import Aside from "../components/aside.vue";
import TopBar from "../components/topBar.vue";

const font = reactive({
  color: "rgba(0, 0, 0, .04)",
});

export default {
  data(){
    return{
      font: font,
      userName: localStorage.getItem("userName"),
      userId: localStorage.getItem("userId"),
    }
  },
  props: {
    showTabBar: {
      type: Boolean,
      default: true,
    },
  },
  components: {
    Aside,
    TopBar,
  },
};
</script>

<style scoped>
aside {
  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.2);
  z-index: 2020;
}
#watermark {
  position: absolute;
}
</style>